<template>
    <div class="box">
      <h2>子组件 add</h2>
      从vuex中获取的值:<label>{{ count }}</label>
      <br />
      <button @click="add">值+1</button>
      <button @click="addNum(2)">值+2</button>
      <button @click="addNum(3)">值+3</button>
    </div>
  </template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AddItem',
  computed: {
    //   count(){
    //       return this.$store.state.count
    //   }
    ...mapState(['count'])
  },
  methods: {
    add () {
      //   console.log(this.count)  // 这个组件的computed，count没有setter
      //   console.log(this.$store.state.count)
      // 虽然可以改掉state中的数据，但是不遵循单向数据流的规范  父传子
      // 子组件不能直接修改父组件中的数据，同理，子组件也不能直接修改store里面的数据
      //   this.$store.state.count++

      // 提交mutation, 相当于告诉store，你要调用addOne了哦~
      this.$store.commit('addOne')
    },
    // mutation传参的情况
    // this.$store.commit('mutation方法', 参数)
    addNum (n) {
      this.$store.commit('addNum', n)
    }
  }
}
</script>

  <style lang="css" scoped>
  .box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
  }
  h2 {
    margin-top: 10px;
  }
  </style>
